WEEKLY DESIGN CHALLENGE -
PARALLAX EFFECT
Practice Parallax on Figma
Step 1: Convert a photo to individual illustration elements on Illustrator.
For this exercise, I chose a photo of Mt. Rainier I took on a hike. This photo worked particularly well because of the multiple layers of mountains and forests. I then converted the photo to an illustration using the "Trace Image" functionality. After wrestling with the colors and details, I found a final version I liked and expanded the elements. I then grouped them based on which layer of the parallax image they would belong to, ending up with 5 unique layers.
Step 2: Save each element individually and add to Figma
I brought each element into Figma separately and resized them to fit my frame (desktop).
Step 3: Build the initial Screen
Reconstructing the image to fit the frame required resizing each element. This required several iterations, but was mostly trial and error until something seemed visually appealing. It also required ensuring the images could shift as they moved in the parallax treatment.
Step 4: Duplicate and shift
From there, I duplicated the scene and created the end frame of the parallax shift. For this particular scene, I wanted to shift into the early evening, so I modified the color of the sky and added some subtle stars. I also increased the size of the top two layers, those of the trees and the first mountain. The other mountains were shifted lower on the screen, out of view, as if we were zooming forward and the larger mountains were lost behind the immediate scenery.
Step 5: Add website elements, text, buttons, menu items
The text, buttons and menu bar were added to the end frame and duplicated to the initial parallax screen. The Title and main CTA were dropped lower on the initial screen and the opacity turned to 0%. When animated, this would create the affect of the text fading and moving into the screen.
Step 6: Animate
The last step was to animate the screens and ensure they moved smoothly between the screens. The same animation was applied to both screens, so that one could navigate between them smoothly.
FIN!
And that is how I created this neat parallax effect in Figma.
